<template>
    <div class="layout-route">
        <div class="card card-search">
            <el-form :model="queryParams" ref="queryForm" v-show="showSearch" inline label-width="100px">
                <el-form-item label="采购单号" prop="purchase_number">
                    <el-input v-model.trim="queryParams.purchase_number" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="采购人员" prop="operater_id">
                    <SelectPage
                        v-model="queryParams.operater_id"
                        placeholder="请选择采购人员"
                        :url="$api.purchase.getPurchaserList"
                        show_field="username"
                        show_id="operater_id"
                        query_field="keyword"
                        filterable
                        clearable
                        popper-class="custom-select"
                        style="width: 240px"
                    ></SelectPage>
                </el-form-item>
                <el-form-item label="创建时间" prop="create_time">
                    <el-date-picker v-model="queryParams.create_time" type="date" placeholder="请选择创建时间" clearable style="width: 240px"> </el-date-picker>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="card">
            <el-table v-loading="loading" :data="tableData" border script  class="expend-table">
                <!-- 子表 -->
                <el-table-column type="expand" label="货品详情" width="100">
                    <template slot-scope="scope">
                        <div class="expend-sku-list">
                            <div class="expend-sku-item" v-for="(item, index) in scope.row.sku_list" :key="index">
                                <div class="expend-sku-image" style="white-space: nowrap; margin-right: 8px;">
                                    <ImageUploadImg v-model="item.image_url" :readOnly="true"></ImageUploadImg>
                                </div>
                                <div class="expend-sku-info" style="flex: 1">
                                    <span>{{ item.seller_sku }}</span>
                                </div>
                                <div class="expend-sku-price" style="white-space: nowrap; margin-left: 8px;">
                                    <div class="expend-sku-price-item" style="margin-bottom: 4px;">
                                        <span class="expend-sku-price-label new">新</span>
                                        <span>x<span style="color: red; font-weight: bold; font-size: 16px;">{{ item.new_purchase_quantity }}</span><span style="margin-right: 8px;">￥{{ item.new_purchase_price }}</span></span>
                                    </div>
                                    <div class="expend-sku-price-item">
                                        <span class="expend-sku-price-label">旧</span>
                                        <span>x<span style="color: red; font-weight: bold; font-size: 16px;">{{ item.old_purchase_quantity }}</span><span style="margin-right: 8px;">￥{{ item.old_purchase_price }}</span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="purchase_number" label="采购单号" min-width="180"></el-table-column>
                <el-table-column prop="supply_name" label="供应商" min-width="200"></el-table-column>
                <el-table-column prop="operater" label="采购员" min-width="120"></el-table-column>
                <el-table-column prop="total_purchase_price" label="价格" width="120">
                    <template slot-scope="scope">
                        {{scope.row.total_purchase_price > 0 ? scope.row.total_purchase_price : scope.row.purchase_cost }}
                    </template>
                </el-table-column>
                <el-table-column prop="warehouse" label="仓库" width="160"></el-table-column>
                <el-table-column prop="status" label="状态" width="120"></el-table-column>
                <el-table-column prop="create_time" label="创建时间" min-width="160"></el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList"></pagination>
        </div>
        <detail-dialog v-model="detailDialog.visible" v-if="detailDialog.visible" :params="detailDialog.data" @success="handleQuery"></detail-dialog>
    </div>
</template>

<script>
import { getPurchaseChange } from '@/api/purchase'
import { parseTime } from '@/utils/quickadmin'
export default {
    name: 'StockList',
    components: {},
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 店铺列表下拉
            shopList: [],
            siteList: [],
            pageInfo: {
                page: 1,
                limit: 10,
            },
            // 查询参数
            queryParams: {
                in_number: undefined,
                purchase_number: undefined,
                create_time: undefined,
            },
            detailDialog: {
                visible: false,
                data: {},
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        //列表
        getList() {
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.queryParams,
                create_time: this.queryParams.create_time ? parseTime(this.queryParams.create_time, 'y-m-d h:i:s') : ''
            }
            getPurchaseChange(qyparams)
                .then(response => {
                    this.tableData = response.data.list.map(item => {
                        item.purchase_cost = item.sku_list.reduce((pre, cur) => pre + parseFloat(cur?.purchase_cost || 0), 0).toFixed(2)
                        item.total_purchase_price = item.sku_list.reduce((pre, cur) => pre + parseFloat(cur?.total_purchase_price || 0), 0).toFixed(2)
                        return {...item}
                    })
                    this.total = response.data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },

        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
            this.getList()
        },

        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')

            this.handleQuery()
        },
    },
}
</script>
<style scoped>
::v-deep .expend-table .el-table__expanded-cell[class*=cell] {
    padding: 0!important;
}
.expend-sku-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
}
.expend-sku-item {
    width: 32%;
    margin:0 0.5% 10px 0.5%;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    display: flex;
    padding: 12px 8px;

}
.expend-sku-item:nth-child(3n-2) {
    margin-left: 1%;
}
.expend-sku-price-label {
    padding: 2px;
    background-color: #f5f5f5;
    color: #666;
    /* border: 1px solid #666; */
    margin-right: 8px;
}
.expend-sku-price-label.new {
    color: red;
    background-color: rgba(255, 0, 0, 0.25);
    /* border: 1px solid red; */
}
</style>